<template>
  <div id="sellingDebts">
    <!-- 表格 -->
    <div class="table">
      <!-- 表格名称 -->
      <div class="sTitle homeTitle">
        <span>赎回明细</span>
        <!-- <el-input placeholder="搜索行社机构" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input> -->
      </div>
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="code" label="产品代码"  align="center"></el-table-column>
          <el-table-column prop="transactionNumber" label="成交编号" align="center"></el-table-column>
          <el-table-column prop="annualized" label="年化收益率"  align="center"></el-table-column>
          <el-table-column prop="dueDate" label="到期日"  align="center"></el-table-column>
          <el-table-column prop="availableBalance" label="可用余额" align="center"></el-table-column>
          <el-table-column prop="initialAmount" label="初始金额" align="center"></el-table-column>
          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="term" label="产品期限" align="center"></el-table-column>
          <el-table-column prop="type" label="产品类型" align="center"></el-table-column>
          <el-table-column prop="interestDate" label="起息日" align="center"></el-table-column>
          <el-table-column  label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="selected(scope.row)">{{scope.row.btntext}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="totalpage">
        </el-pagination>
      </div>
      <!-- -------第二个表格------------- -->
       <div class="tablecon second">
         <div class="secondTitle">已选定赎回明细：</div>
        <el-table :data="selectedData" border style="width: 100%">
          
          <el-table-column prop="code" label="产品代码"  align="center"></el-table-column>
          <el-table-column prop="transactionNumber" label="成交编号" align="center"></el-table-column>
          <el-table-column prop="annualized" label="年化收益率"  align="center"></el-table-column>
          <el-table-column prop="dueDate" label="到期日"  align="center"></el-table-column>
          <el-table-column prop="availableBalance" label="可用余额" align="center"></el-table-column>
          <el-table-column prop="initialAmount" label="初始金额" align="center"></el-table-column>
          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="term" label="产品期限" align="center"></el-table-column>
          <el-table-column prop="type" label="产品类型" align="center"></el-table-column>
          <el-table-column prop="interestDate" label="起息日" align="center"></el-table-column>
          <el-table-column  label="赎回金额(元)" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEdit" type="text" v-model="scope.row.money"></el-input>
              <span v-else>{{scope.row.money}}</span>
            </template>
            
          </el-table-column>
          <el-table-column  label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" @click="editMoney(scope.row)" type="text">{{scope.row.btntext}}</el-button>
              <el-button size="mini" @click="cancle(scope.row)" type="text">取消选定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="btns" style="text-align:center">
    <el-button type="primary"  @click="complete">完成</el-button>
    <el-button type="primary"  @click="goback">取消</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'sellingDebts',
  data () {
    return {
      search: '',
      isEdit:false,
      btntext: '调整赎回面额',
      tableData: [
        
      ],
      selectedData: [

      ],
   
      // 分页
      currentPage: 1,
      totalpage: 0
    };
  },
  mounted() {

    this.getList()
    let shData = sessionStorage.getItem('shData')
    if(shData) {
      this.selectedData = JSON.parse(shData)
    }
  },
  methods: {
     // 分页
    handleSizeChange(val) {
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    getList() {
      let data = {
        productId:  sessionStorage.getItem('productId'),
        page: this.currentPage
      }
      this.axios.get('financialProducts/findAllByBank', {params: data}).then(res => {
      
        let data = res.data.data
          data.forEach((item) => {
            item.btntext = '选定'
          })
        this.tableData = data
        this.totalpage = res.data.pageInfo.total
      })
    },
    editMoney(row) {
  
      if(row.isEdit) {
        row.btntext = '调整赎回面额'
        //  row.remainingMoney = Number(row.remainingMoney) +  Number(row.beforeMoney) - Number(row.money)
        // row.beforeMoney = row.money
        row.isEdit =false
        
      }else {
        row.btntext = '确认调整'
        row.isEdit = true
      }
    
    },
    selected(row) {
      if(row.btntext == '选定') {
        row.btntext = '已选定'
    //    let {...rows} = row //解构赋值 深拷贝
        let rows = {...row, index: this.selectedData.length, btntext: '调整赎回面额', isEdit: false, beforeMoney: 0}  //等价上面？？  扩展

        this.selectedData.push(rows)
        
      } else {
        this.$message({
          type: 'warning',
          message: '已选定，不可再选'
        })
      }
      
    },
    cancle(row) {
        //取消选定
        this.selectedData.forEach((item, index) => {
            if(row.index == index)
              this.selectedData.splice(index, 1)
        })
        this.tableData.forEach((item, index) => {
          if(item.id == row.id) {
            item.btntext = '选定'
          }
        })
    },
    goback() {
      this.$router.go(-1)
    },
    complete() {
      let data = this.selectedData
      let len = data.length
     for(let i = 0; i < len; i++) {
          if(data[i].money == '' || data[i].money == undefined) {
          this.$message({
            type: 'warning',
            message: '请输入赎回面额'
          })
          return false
        }
     }
      sessionStorage.setItem('shData', JSON.stringify(this.selectedData))
      this.$router.go(-1)
     
     
    }
  }
};
</script>

<style lang="scss">
.el-pagination button, .el-pagination span:not([class*=suffix]){
  color: white;
}
  #sellingDebts {
     // ------表格------
    .table {
      .el-input__inner{
        color:white;
        border: 1px solid white;
        background: transparent
      }
      .sTitle {
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        // border-bottom: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .el-input {
          width: 400px;
          margin-right: 20px;
        }
      }
      .tablecon {
        padding: 21px;
        // background: white;
        margin-top: 30px;
        &.second {
          margin-top: 0;
          .secondTitle {
            margin-bottom: 20px;
            margin-bottom: 20px;
            color: white;
          }
        }
      }
      .pgfy {
        padding: 20px;
        padding-top: 10px;
        text-align: right;
        // background: white;
      }
    }
  }
</style>
